<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>温馨提示弹窗</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow: hidden;
            height: 100vh;
        }
        .popup {
            position: absolute;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            color: #333;
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 14px;
            background-color: rgba(255, 255, 255, 0.9);
            pointer-events: none; /* 避免弹窗遮挡页面操作 */
        }
    </style>
</head>
<body>
    <script>
        // 温馨提示消息列表
        const messages = [
            "多喝水哦~",
            "今天过得开心嘛",
            "天天都要元气满满",
            "顺顺利利",
            "天冷了，多穿衣服",
            "期待下一次见面",
            "记得吃水果",
            "别熬夜",
            "梦想成真",
            "保持微笑呀",
            "好好爱自己",
            "所有烦恼都消失",
            "保持好心情"
        ];
        // 弹窗背景颜色列表
        const colors = [
            "#f8d7da", "#d1ecf1", "#d4edda", "#fff3cd", 
            "#e2e6ea", "#f3d9fa", "#cfe2ff"
        ];

        // 创建弹窗函数
        function createPopup() {
            const popup = document.createElement("div");
            popup.className = "popup";
            
            // 随机选择消息和颜色
            const randomMsg = messages[Math.floor(Math.random() * messages.length)];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            
            popup.textContent = randomMsg;
            popup.style.backgroundColor = randomColor;

            // 获取浏览器窗口尺寸
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            
            // 随机设置弹窗位置（确保弹窗完全在视口内）
            const popupWidth = 180 + Math.random() * 100;
            const popupHeight = 60 + Math.random() * 40;
            const left = Math.random() * (windowWidth - popupWidth);
            const top = Math.random() * (windowHeight - popupHeight);
            
            popup.style.width = `${popupWidth}px`;
            popup.style.height = `${popupHeight}px`;
            popup.style.left = `${left}px`;
            popup.style.top = `${top}px`;

            document.body.appendChild(popup);

            // 3秒后移除弹窗
            setTimeout(() => {
                popup.remove();
            }, 3000);
        }

        // 每隔1秒创建一个新弹窗
        setInterval(createPopup, 1000);
    </script>
</body>
</html>